<template>
    <view class="page">
        <view>
            <view class="back_big_box">
                <view style="height: 88rpx;"></view>
                <view class="title_icon_box">
                    <view class="back_icon">
                        <u-icon v-if="mark == 1" @click="gohome" name="home-fill" size="50"></u-icon>
                        <u-icon v-else @click="goback" name="arrow-left" size="50"></u-icon>
                    </view>
                    <view class="back_title_box">抢单中心
                    </view>
                </view>
            </view>
        </view>
        <scroll-view scroll-y class="order_big_box" v-if="orderList.length > 0" @scrolltolower="lower()">
            <view style="height: 20rpx;"></view>
            <view class="dange_order_box" v-for="(item, index) in orderList" :key="index">
                <view class="orderNum_box">
                    <view class="left_lv_box"></view>
                    <view class="zs_order_num_box">订单编号：{{ item.first_order_sn }}</view>
                </view>

                <view class="zc_type_box">
                    <view class="le_box">
                        <view class="cc_box">
                            <image :src="item.product_img" mode="scaleToFill" />
                        </view>
                        <view class="xx_box">
                            <view class="xx_top_box">{{ item.product_name }}</view>
                            <view class="xx_bot_box">
                                按{{ item.category_name }}拉
                                <view v-if="item.position_name"
                                    style="width: 8rpx;height: 8rpx;margin: 0 6rpx; border-radius: 50%;background-color: rgba(204, 204, 204, 1);">
                                </view>
                                <text v-if="item.position_name">
                                    {{ item.position_name }}
                                </text>
                            </view>
                        </view>
                    </view>
                    <view class="r_box">
                        <view class="daishu_box">
                            <text style="color:rgba(255, 141, 26, 1);font-size: 20rpx;">¥</text>
                            <text style="font-weight: 700;color:rgba(255, 141, 26, 1);font-size: 36rpx;">{{
                            item.product_price }}</text>
                            /{{ item.category_name }}
                        </view>
                        <view class="yg_box">预估{{ item.num * 1 }}{{ item.category_name }}</view>
                    </view>
                </view>

                <view class="zclx_box">
                    <view class="xing_box">
                        <text style="margin-right: 14rpx;">{{ item.real_name }}</text> <text>{{ item.phone }}</text>
                    </view>
                    <view class="xing_box">
                        <text style="margin-right: 14rpx;">时间：</text> <text>{{ item.appointment_time }}</text>
                    </view>
                    <view class="dizhi_box">
                        <view>地址：</view>
                        <view class="jt_box">{{ item.location }}</view>
                        <view @click.stop="txnav(item)"
                            style="color: #1ac279;width: 200rpx;height: 56rpx;border-radius: 10rpx;background: rgba(245, 245, 245, 1);line-height: 56rpx;text-align: center;">
                            <u-icon name="map-fill" size="32" color="#1ac279"></u-icon>一键导航
                        </view>
                    </view>
                </view>

                <view style="margin: auto;width: 636rpx;border: 2rpx solid rgba(245, 245, 245, 1);">
                </view>


                <view class="yuyue" v-if="item.category_id == 2">预约车型：{{ item.vehicle_name }}</view>



                <view class="prc_box">
                    <view class="left_trxt_box">已付定金{{ item.first_pay_money }}</view>
					<view class="left_trxt1_box">预估尾款：¥{{ item.estimate_balance_money }}</view>
                    <!-- <view class="czbtn1_box" @click.stop="goinDetail(item, subId)">查看详情</view>
                    <view class="czbtn1_box" @click.stop="goinDetail(item, subId)">查看详情</view> -->
                </view>

                <view style="margin: auto;width: 636rpx;border: 2rpx solid rgba(245, 245, 245, 1);">
                </view>
                <view class="prc_box" style="justify-content: flex-end;">
                    <view class="czbtn1_box" @click.stop="goinDetail(item)">查看详情</view>
                    <view class="czbtn1_box" style="background: rgba(26, 194, 121, 1);color: #fff;margin-left:30rpx;"
                        @click.stop="$noMultipleClicks(take, item)">立即抢单
                    </view>
                </view>
            </view>
            <aLoadMore :status="loadStatus" mode="loading2" color="#808080" textColor="#808080" textSize="24rpx"
                padding="" :loadTitle="loadTitle"></aLoadMore>
        </scroll-view>
        <view v-else>
            <empoy :imageUrl="'https://build.lwjcg.com/uploads/empty_order.png'" :kongtext="'暂无订单'"></empoy>
        </view>
    </view>
</template>
<script>

import back from "@/components/goback/goback"
export default {
    components: {
        back
    },
    data() {
        return {
            noClick: true,//防连点
            loadStatus: 'normal',//加载状态down,loading,normal
            loadTitle: {
                down: "上拉加载更多",
                loading: "正在加载",
                normal: "没有更多了",
            },
            page: 1,
            orderList: [],//列表
            flags: false,//防抖
            mark: '0',
            isBack: true,
            survey_id: ''
        }
    },
    onLoad(options) {
        this.mark = options.mark
    },
    onShow() {
        this.getorderList()
    },
    methods: {
        // 计算距离
        getDistance(lat1, lon1, lat2, lon2) {
            const earthRadius = 6371; // 地球半径，单位为千米
            console.log(lat1, lon1, lat2, lon2);
            // 将经纬度转换为弧度
            const radLat1 = (Math.PI / 180) * lat1;
            const radLon1 = (Math.PI / 180) * lon1;
            const radLat2 = (Math.PI / 180) * lat2;
            const radLon2 = (Math.PI / 180) * lon2;

            console.log(radLat1, radLat2, radLon1, radLon2);

            // 计算经纬度的差值
            const deltaLat = radLat2 - radLat1;
            const deltaLon = radLon2 - radLon1;
            console.log(deltaLat, deltaLon);

            // 使用Haversine公式计算距离
            const a =
                Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +
                Math.cos(radLat1) *
                Math.cos(radLat2) *
                Math.sin(deltaLon / 2) *
                Math.sin(deltaLon / 2);
            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
            const distance = earthRadius * c;

            return distance.toFixed(2); // 返回保留两位小数的距离值
        },
        lower() {
            if (this.flags) {
                this.getorderList();
            } else {
                this.loadStatus = 'normal'
            }

        },
        goback() {
            uni.navigateBack()
        },
        gohome() {
            uni.switchTab({
                url: '/pages/index/index'
            })
        },
        goinDetail(item) {
            uni.navigateTo({
                url: '/orderPage/institutedetail?order_id=' + item.id + '&pay_status=' + 2 + '&subId=' + 2 + '&admin=' + 1
            })
        },
        // 点击导航
        txnav(item) {
            uni.openLocation({
                latitude: item.lat * 1,
                longitude: item.lng * 1,
                address: item.location,
                // scale: ,
                success: function () {
                    console.log('success');
                },
                fail(err) {
                    console.log(err, "errrr")
                }
            });
        },
        getorderList() {
            let data = {
                page: this.page,
            }
            this.loadStatus = 'loading'
            this.$Request.post(this.$api.order.surveyList, data).then(res => {
                this.loadStatus = 'down'
                if (res.code == 200) {
                    uni.hideLoading()
                    var orderList = res.data.orders
                    console.log(orderList)
                    this.page++;
                    this.orderList = this.orderList.concat(orderList);
                    if (orderList.length < 20) {
                        this.flags = false
                        this.loadStatus = 'normal'
                    } else {
                        this.flags = true
                    }
                    // this.getDistance()
                }
            })
        },
        // 抢单
        take(item) {
            let data = {
                survey_id: uni.getStorageSync('survey_id'),
                order_id: item.id
            }
            this.loadStatus = 'loading'
            this.$Request.post(this.$api.order.surveyRob, data).then(res => {

                // if (res.code == 200) {
                uni.showToast({
                    title: res.msg,
                    icon: 'none'
                })
                setTimeout(() => {
                    if (this.mark == 1) {
                        uni.redirectTo({ url: '/orderPage/surveyorcenter' })
                        uni.setStorageSync('back', 2)
                    } else {
                        uni.navigateBack()
                    }

                }, 600)
                // }

            })
        },
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    min-height: 100vh;

    .back_big_box {
        width: 750rpx;
        height: 176rpx;
        opacity: 1;
        background-color: #fff;

        .title_icon_box {
            width: 100%;
            height: calc(176rpx - 88rpx);
            position: relative;
            color: black;

            .back_icon {
                position: absolute;
                left: 36rpx;
                top: 20rpx;
                width: 50rpx;
                height: 50rpx;
                line-height: 36rpx;
                color: black;
            }

            .back_title_box {
                text-align: center;
                width: 100%;
                height: 52rpx;
                opacity: 1;
                /** 文本1 */
                font-size: 36rpx;
                font-weight: 600;
                letter-spacing: 0rpx;
                line-height: 80rpx;
                color: black;

            }
        }

    }

    .order_big_box {
        width: 100%;
        height: calc(100vh - 180rpx);
        background: rgba(246, 246, 246, 1);

        .dange_order_box {
            width: 700rpx;
            // height: 628rpx;
            border-radius: 26rpx;
            background: rgba(255, 255, 255, 1);
            margin: auto;
            box-sizing: border-box;
            margin-bottom: 20rpx;

            .orderNum_box {
                width: 100%;
                height: 90rpx;
                border-bottom: 2rpx solid rgba(245, 245, 245, 1);
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .left_lv_box {
                    width: 6rpx;
                    height: 22rpx;
                    background: rgba(26, 194, 121, 1);
                    margin-right: 30rpx;

                }

                .zs_order_num_box {
                    height: 90rpx;
                    line-height: 90rpx;
                    font-size: 28rpx;
                    font-weight: 500;
                    color: rgba(0, 0, 0, 1);
                }
            }

            .zc_type_box {
                width: 100%;
                height: 154rpx;
                border-bottom: 2rpx solid rgba(245, 245, 245, 1);
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .le_box {
                    width: 50%;
                    height: 88rpx;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    box-sizing: border-box;
                    padding-left: 34rpx;

                    .cc_box {
                        width: 88rpx;
                        height: 88rpx;
                        border-radius: 50%;
                        background-color: #e8fcee;
                        margin-right: 22rpx;

                        image {
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                        }
                    }

                    .xx_box {
                        height: 88rpx;

                        .xx_top_box {
                            width: 180rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            height: 40rpx;
                            line-height: 40rpx;
                            font-size: 28rpx;
                            // font-weight: 500;
                            line-height: 40rpx;
                        }

                        .xx_bot_box {
                            height: 40rpx;
                            line-height: 40rpx;
                            font-size: 28rpx;
                            // font-weight: 500;
                            line-height: 40rpx;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                        }
                    }
                }

                .r_box {

                    width: 50%;
                    height: 88rpx;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    .daishu_box {
                        height: 88rpx;
                        font-size: 24rpx;
                        font-weight: 400;
                        line-height: 88rpx;
                        color: rgba(0, 0, 0, 1);
                    }

                    .yg_box {
                        height: 88rpx;
                        font-size: 24rpx;
                        font-weight: 400;
                        line-height: 92rpx;
                        color: rgba(0, 0, 0, 1);
                    }
                }
            }

            .zclx_box {
                width: 100%;
                height: 204rpx;
                box-sizing: border-box;
                padding-left: 36rpx;
                padding-top: 32rpx;

                .xing_box {
                    height: 40rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    line-height: 40rpx;
                    color: rgba(0, 0, 0, 1);
                    margin-bottom: 16rpx;
                }

                .dizhi_box {
                    width: 100%;
                    height: 40rpx;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .jt_box {
                        width: 350rpx;
                        margin-left: 10rpx;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;

                    }
                }
            }

            .yuyue {
                width: 100%;
                height: 80rpx;
                line-height: 80rpx;
                box-sizing: border-box;
                padding-left: 34rpx;
                font-size: 28rpx;
                // font-weight: 500;
                color: rgba(0, 0, 0, 1);
                border-bottom: 2rpx solid rgba(245, 245, 245, 1);
            }

            .prc_box {
                width: 100%;
                height: 100rpx;
                box-sizing: border-box;
                padding: 0 24rpx 0 32rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .left_trxt_box {
                    height: 100rpx;
                    line-height: 100rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(0, 0, 0, 1);
                }
                .left_trxt1_box {
                    height: 100rpx;
                    line-height: 100rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    margin-right: 50rpx;
                    color: rgba(56, 56, 56, 1);
                }

                // .right_text_box {
                //     display: flex;
                //     justify-content: flex-end;
                //     align-items: center;

                .czbtn_box {
                    width: 220rpx;
                    height: 56rpx;
                    border-radius: 12rpx;
                    border: 2rpx solid rgba(26, 194, 121, 1);
                    text-align: center;
                    line-height: 56rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(26, 194, 121, 1);
                }

                .czbtn1_box {
                    width: 168rpx;
                    height: 56rpx;
                    border-radius: 12rpx;
                    border: 2rpx solid rgba(26, 194, 121, 1);
                    text-align: center;
                    line-height: 56rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(26, 194, 121, 1);


                }



            }

        }

    }




}
</style>
